<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    var arr = [1, 2, 3, 4, 5, 6];

    var zhang = {
        name: "张三",
        age: 18,
        height: "180cm",
        weight: "80kg",
    }

    // 传统的数组和对象转字符串 
    // console.log(arr.toString());  // "1,2,3,4,5,6"
    // console.log(zhang.toString());  //"[object Object]"

    // 网页上可以存储一些数据(字符串类型)  -> 存储数组和对象会有问题!!!(结构被毁坏,数据丢失) => 在不破坏数组和对象解构的情况下 将其转化为字符串
    // 前端向后端请求数据, 后端给的数据是字符串(text, html,json字符串), 如果是json字符串 => 还原为数组和对象

    // 是否可以在不破坏数组和对象解构的情况下 将其转化为字符串
    var arr = [1, 2, 3, 4, 5, 6];   // '[1, 2, 3, 4, 5, 6]'
    var zhang = { name: "张三", age: 18, height: "180cm", weight: "80kg" }; // '{"name": "张三", "age": 18, "height": "180cm", "weight": "80kg" }'

    function arrToString(arr) {
        return `[${arr.join(",")}]`
    }

    function objToString(obj) {
        // debugger;
        var arr = [];
        for (var key in obj) {
            var val = obj[key];
            var str = `"${key}":"${val}"`;
            arr.push(str);
        }

        return `{${arr.join(",")}}`;
    }

    // 数组和对象转化为 JSON字符串(不破坏数组和对象解构的情况下 将其转化为字符串)
    var arrStr = arrToString(arr);
    console.log(1, arrStr);

    var objStr = objToString(zhang);
    console.log(1, objStr);


    // 将JSON字符串转化 还原为数组和对象  => 模拟封装

    function JsonToObj(jsonStr) {
        return eval("(" + jsonStr + ")");  //将传入的字符串作为JSON语句执行
    }

    var arr1 = JsonToObj(arrStr);
    console.log(arr1);

    var obj1 = JsonToObj(objStr);
    console.log(obj1);






</script>

</html>